<template>
  <contentModel v-if="editModelShow" title="按供应商添加" @close="handleClose">
    <a-layout style="height: 100%" :class="screenClass">
      <a-layout>
        <a-layout-content>
          <query-page
            v-model:selectedKeys="attrSelectedKeys"
            :form-component-config="formComponentConfig"
            :form-render-config="formRenderConfig"
            :form-render-keys="formRenderKeysBySupplier"
            :table-component-config="tableComponentConfig"
            :table-render-config="tableRenderConfig"
            :table-render-keys="tableRenderKeysBySupplierAdd"
            :data="supplierList"
            row-key="id"
            :total="total"
            :loading="isLoading"
            row-selection-type="checkbox"
            @selection-change="handleSelectionChange"
            @query-data="getData"
          >
          </query-page>
        </a-layout-content>
        <a-layout-sider width="20%" style="margin-left: 16px"
          ><a-list size="medium">
            <template #header> 已选供应商 </template>
            <a-list-item v-for="(item, index) in selectAttrList" :key="index">
              <a-row>
                <a-col :span="4">
                  <secretLevelInfo
                    :record="{
                      secretLevel: item.secretLevel,
                      secretLevelName: item.secretLevelName,
                    }"
                  />
                </a-col>
                <a-col :span="19">
                  {{ item.supplierChinese }}
                </a-col>
                <a-col :span="1">
                  <div
                    style="float: right; cursor: pointer"
                    @click="deleteItem(item, index)"
                  >
                    x
                  </div>
                </a-col>
              </a-row>
            </a-list-item>
          </a-list></a-layout-sider
        >
      </a-layout>
    </a-layout>
    <template #footer>
      <a-button @click="handleClose">取消</a-button>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </template>
  </contentModel>
</template>

<script setup lang="ts">
  import {
    formRenderConfig,
    formComponentConfig,
    formRenderKeysBySupplier,
  } from '@/views/basic-configuration/personnel-matrial/personnelmatrialformlist';
  import {
    tableRenderKeysBySupplierAdd,
    tableComponentConfig,
    tableRenderConfig,
  } from '@/views/basic-configuration/personnel-matrial/procurementquery-tab';
  import { defineAsyncComponent, ref } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import secretLevelInfo from '@/common/components/secret-level-info/index.vue';
  import {
    getSupplierQueryPage,
    saveBySupplier,
  } from '@/api/Basimanagementapi/personnel-matrial';

  import { Message } from '@arco-design/web-vue';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const attrSelectedKeys = ref([]);
  const deleteItem = (val: any, index: any) => {
    selectAttrList.value.splice(index, 1);
    const itemIndex = attrSelectedKeys.value.findIndex((v) => v === val.id);
    attrSelectedKeys.value.splice(itemIndex, 1);
  };
  const supplierList = ref();
  const selectAttrList = ref([]);
  const total = ref(0);
  const isLoading = ref(true);
  const getData = async (params: any) => {
    isLoading.value = true;
    const { data } = await getSupplierQueryPage(params);
    supplierList.value = data.list;
    total.value = data.total;
    isLoading.value = false;
  };
  const handleSelectionChange = (itemList: any) => {
    selectAttrList.value = itemList.map((item) => {
      if (supplierList.value.find((i) => i.id === item)) {
        return supplierList.value.find((i) => i.id === item);
      }
      return selectAttrList.value.find((i) => i.id === item);
    });
  };
  const props = defineProps(['selectPersonalObj']);
  const handleSubmit = async () => {
    if (selectAttrList.value.length === 0) {
      Message.warning('请至少选择一条数据进行操作');
      return;
    }
    const params = [];
    selectAttrList.value.forEach((v) => {
      console.log(v, '000v');
      console.log(props.selectPersonalObj);
      const obj = {
        secretLevel: v.secretLevel,
        userId: props.selectPersonalObj.id,
        supplierId: v.id,
        userCode: props.selectPersonalObj.userCode,
        userName: props.selectPersonalObj.username,
      };
      params.push(obj);
    });

    const { data } = await saveBySupplier(params);
    if (data) {
      Message.success('新增成功');
      handleClose();
    }
    console.log(data);
  };
  const emit = defineEmits(['close']);
  const editModelShow = ref(true);

  const handleClose = () => {
    emit('close');
  };
</script>

<style lang="less" scoped>
  .table /deep/.arco-table-container .arco-table-content-scroll-x {
    overflow-y: auto;
  }
</style>
